<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#div1 {
				width: 200px;
				height: 200px;
				background: pink;
			}

			#div2 {
				width: 100px;
				height: 100px;
				background: coral;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			我是DIV1
			<div id="div2">
				我是DIV2
			</div>
		</div>

		<a href="https://www.baidu.com" id="a">打开百度，你就知道！</a>

		<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
		<script>
			var div1 = document.getElementById("div1");
			var div2 = document.getElementById("div2");

			// 为div1绑定单击事件
			div1.onclick = function() {
				console.log("div1 的单击事件触发了！");
			};

			// 为div2绑定单击事件
			div2.onclick = function(e) {
				console.log("div2 的单击事件触发了！");
				e.stopPropagation();
			};

			// 为a绑定单击事件
			a.onclick = function() {
				event.preventDefault();
			};
		</script>
	</body>
</html>
